<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link rel="stylesheet" th:href="@{https://unpkg.com/element-ui/lib/theme-chalk/index.css}">
    <link rel="stylesheet" th:href="@{static/css/gy.css}">
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">提前还款明细表</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div class="head">
        <div class="head1">
            <div class="head11">
                <i class="el-icon-user-solid"></i>
            </div>
            <div class="head12">
                提前还款用户数量(人)
            </div>
            <div class="head13">
                本月/今年
            </div>
            <div class="head14">
                <font size="23px">{{countMonth}}/</font>{{countYear}}
            </div>
        </div>
        <div class="head2">
            <div class="head11">
                <i class="el-icon-coin"></i>
            </div>
            <div class="head12">
                还款金额(元)
            </div>
            <div class="head13">
                本月/今年
            </div>
            <div class="head14">
                <font size="23px">{{countMonthCount}}/</font>{{countYearCount}}
            </div>
        </div>
    </div>
    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">筛选查询</span>
            </div>

            <!--分页查询-->
            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="姓名" style="margin-left: 20px">
                        <el-input v-model="formInline.name" placeholder="姓名" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" style="margin-left: 20px">
                        <el-input v-model="formInline.userName" placeholder="账号" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>
                <el-button type="text" @click="dialogFormVisible = true">
                        <el-row>
                            <el-button size="small" style="float: left; margin-left: 300px">群发邮件</el-button>
                        </el-row>
                </el-button>

                <el-button type="text" @click="showDialog = true">
                    <el-row>
                        <el-button size="small" style="float: left; margin-left: 50px">电话提醒</el-button>
                    </el-row>
                </el-button>
            </div>

            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        @selection-change="handleGoodsChange">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <!--用户ID-->
                    <el-table-column
                        prop="id"
                        type="selection"
                        width="100"
                        align="center">
                    </el-table-column>
                    <!--订单ID-->
                    <el-table-column
                            prop="contractBean.orderBean.userBean.userName"
                            label="用户账号"
                            width="200"
                            align="center">
                    </el-table-column>


                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            prop="contractBean.orderBean.userBean.userInforBean1.name"
                            label="用户姓名"
                            width="170"
                            align="center">
                    </el-table-column>



                    <el-table-column
                            prop="contractBean.orderBean.money"
                            label="贷款总额"
                            width="170"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="audit"
                            label="申请结果"
                            width="200"
                            align="center"
                            :formatter="resultFormat">
                    </el-table-column>

                    <el-table-column
                            prop="createTime"
                            label="创建日期"
                            width="200"
                            align="center"
                            :formatter="timeFormat">
                    </el-table-column>

                    <el-table-column
                            prop="deduct"
                            label="划扣状态"
                            width="200"
                            align="center"
                            :formatter="statusFormat">
                    </el-table-column>
                </el-table>
            </template>

                <!--前端分页插件-->
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>

        </el-card>
    </div>

    <!--邮件发送模态框-->
    <el-dialog title="邮件发送" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="发送对象" :label-width="formLabelWidth">
                :<font color="red">{{totals}}</font>个对象
            </el-form-item>
            <el-form-item label="邮件内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add()">发 送</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
        </div>
    </el-dialog>

    <!--电话提醒模态框-->
    <el-dialog title="邮件发送" :visible.sync="showDialog">
        <el-form :model="form">
            <el-form-item label="发送对象" :label-width="formLabelWidth">
                :<font color="red">{{totals}}</font>个对象
            </el-form-item>
            <el-form-item label="电话内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add1()">发 送</el-button>
            <el-button @click="showDialog = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
        </div>
    </el-dialog>

</div>
<script th:inline="javascript">
    let app = new Vue({
            el:'#main',
            data:{
                //多选框选中的个数
                totals:'',
                //后端传过来的总数信息
                countMonth:'',
                countYear:'',
                countMonthCount:'',
                countYearCount:'',
                dialogFormVisible: false,
                showDialog:false,
                total:'',
                //表格数据
                tableData:[],
                //总条数
                pageSize:10,
                //当前页
                currentPage:1,
                total:0,
                formInline: {
                    name: '',
                    userName: ''
                },
                form: {
                    // name: '',
                    content:''
                },
                formLabelWidth: '120px'
            },
            methods:{
                //模态框传值
                add:function(){
                    alert("111");
                    axios.get([[@{gy/mail}]],{
                        params:{
                            // limit:10,
                            // pageNum:1,
                            // sort:"create_time",
                            // sortOrder:"desc",
                            // name:this.form.name,
                            region:this.form.content
                        }
                    })
                .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        console.log(res);
                        if(res.data.code==200){
                            alert("发送成功~")
                        }
                        // this.total = res.data.total;
                        // this.rows = res.data.rows;
                    })
                        .catch(error => {
                            console.log(error);
                        });
                },
                //向后端发起请求，加载表格内容，传的参数是当前查第几页
                getData(val){
                    axios.get([[@{pc/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].status === 0){
                                this.tableData[i].status = true;
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //改变每页显示数据条数时执行的方法
                handleSizeChange(val){
                    this.pageSize=val;
                    this.currentPage=1;
                    this.getData(this.currentPage);
                },
                //翻页时执行的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getData(this.currentPage);
                },
                change:function(index,row){
                    console.log(index,row);
                },
                //查询多选框选中的个数
                handleGoodsChange(row) {
                    // alert(row.length);
                    this.totals=row.length;
                },
                resultFormat(row,column){
                    if(row.audit==0){
                        return "未通过"
                    }else if(row.audit==1){
                        return "已通过"
                    }
                },
                //时间转换
                timeFormat(row,column){
                    let data = row[column.property]
                    let dt = new Date(data)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                },
                statusFormat(row,column){
                    if(row.deduct==0){
                        return "未划扣"
                    }else if(row.deduct==1){
                        return "已划扣"
                    }
                },
                //模糊查询
                onSubmit() {
                    axios.get([[@{pc/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            name:this.formInline.name,
                            UserName:this.formInline.userName
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        // for(let i = 0 ;i<this.tableData.length;i++){
                        //     if(this.tableData[i].status === 0){
                        //         this.tableData[i].status = true;
                        //     }
                        // }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //人数、金额查询
                getSum(val1) {
                    axios.get([[@{pc/pre}]],{
                    }).then(res => {
                        console.info(res);
                        //将查询到的数据赋给表格中绑定的变量
                        this.countMonth = res.data.countMonth;
                        this.countYear = res.data.countYear;
                        this.countMonthCount = res.data.countMonthCount;
                        this.countYearCount = res.data.countYearCount;

                    }).catch(error => {
                        console.log(error);
                    })
                },
                jump(val){
                    alert(val.contractBean.orderBean.id);
                    alert(val.contractBean.orderBean.userBean.id);
                }
            },
            //创建时执行查询，查第一页
            created : function () {
                this.getData(1);
                this.getSum();
            }

    })
    let app3 = new Vue({
        el:"#top"
    })
</script>
</body>
</html>